<template>
  <view class="page flex-col">
    <view class="box_1 flex-col">
      <view class="section_user flex-col">
        <view class="block_3 flex-col">
          <view class="image-wrapper_3 flex-row">
            <image
              class="image_6"
              referrerpolicy="no-referrer"
              src="/static/images/SketchPng23a8e9a8692d1af5ec46ceff68d2f02fa355ececb13194afa0d29c254647307e.png"
            />
            <image
              class="image_7"
              referrerpolicy="no-referrer"
              src="/static/images/SketchPng0388c32b9483b911ad15ed63d9d7a12682e3834f136ee4462cd479e1961f443e.png"
            />
          </view>
        </view>
      </view>


      <view class="section_1 flex-col">
        <view class="box_thumb flex-row">
          <view class="thumb flex-col" />
        </view>
        <text class="text_1">138****8888</text>
        <text class="text_2">成绩及报告</text>
        <view class="group_1 flex-row">
          <text class="text_3">38</text>
          <text class="text_4">分</text>
          <image
            class="image_1"
            referrerpolicy="no-referrer"
            src="/static/images/SketchPng2667d648fb752781c6f702dbdad2762859556b516e7b4555303b325802bccafb.png"
          />
          <view class="image-text_1 flex-row justify-between">
            <view class="text-group_1 flex-col">
              <view class="text-wrapper_1">
                <view class="section_2 flex-col" />
                <text class="text_5">测试用时</text>
                <text class="text_6">7</text>
                <text class="text_7">分</text>
                <text class="text_8">3</text>
                <text class="text_9">秒</text>
              </view>
              <view class="text-wrapper_2">
                <view class="section_2 flex-col" />
                <text class="text_10">已经超过</text>
                <text class="text_11">9</text>
                <text class="text_12">%的人</text>
              </view>
            </view>
          </view>
        </view>
        <text class="text_13">词汇</text>
        <view class="group_2 flex-row">
          <text class="text_14">阅读</text>
          <view class="box_2 flex-col">
            <view class="box_3 flex-col">
              <view class="box_4 flex-col">
                <image
                  class="image_2"
                  referrerpolicy="no-referrer"
                  src="/static/images/SketchPng01c091fda3d07ce3d02995e94077b2005a4ca417cd33933307ff37064f177edf.png"
                />
                <image
                  class="image_3"
                  referrerpolicy="no-referrer"
                  src="/static/images/SketchPng99f363b267d8d2a4e227065657c1af6ef5909a8019f6bc8c2c3a81716ad7174f.png"
                />
                <view class="box_5 flex-col" />
                <view class="box_6 flex-col" />
                <view class="box_7 flex-col" />
              </view>
            </view>
          </view>
          <text class="text_15">语法</text>
        </view>
        <text class="text_16">听力</text>
        <view class="group_3 flex-row justify-between">
          <view class="text-wrapper_3 flex-col">
            <text class="text_17">再测一次</text>
          </view>
          <view class="text-wrapper_4 flex-col">
            <text class="text_18">错题详情</text>
          </view>
        </view>
      </view>
      <view class="section_3 flex-col">
        <view class="group_4 flex-row">
          <view class="image-text_3 flex-row justify-between">
            <text class="text-group_3">获取深度分析</text>
            <image
              class="thumbnail_1"
              referrerpolicy="no-referrer"
              src="/static/images/SketchPng04448ed555159a41dad915d16c2faa5097d9c55f46c34f44b39ddcd60d5f3da5.png"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      constants: {}
    };
  },
  methods: {}
};
</script>
<style lang='scss'>
@import '@/static/css/common/common.scss';
.page {
	background: linear-gradient(135deg, #e6f0ff 0%, #b3d1ff 100%);
	position: relative;
	width: 750rpx;
	height: 1624rpx;
	overflow: hidden;
  .box_1 {
    background: url('/static/image/top_bg.png') top center no-repeat;
	background-size: 100% 400rpx, 100% 100%;

    position: relative;
    padding-top: 424rpx;
    .section_1 {
	  background-color: #ffffff;
      border-radius: 37px 37px 0px 0px;
      padding: 52rpx 72rpx 46rpx 76rpx;

	  .box_thumb {
     	margin-top:-50px;
	    margin-bottom: 26rpx;
		align-self: center;
	    .thumb {
	      border-radius: 50%;
	      background-image: url(/static/images/0e31bc611c2040b1b19b9fe47a5d93f9_mergeImage.png);
	      width: 100rpx;
	      height:100rpx;
	    }
	  }

      .text_1 {
        overflow-wrap: break-word;
        color: rgba(52, 52, 52, 1);
        font-size: 24rpx;
        letter-spacing: 0.75px;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 34rpx;
        align-self: center;
      }
      .text_2 {
        overflow-wrap: break-word;
        color: rgba(52, 52, 52, 1);
        font-size: 28rpx;
        letter-spacing: 0.875px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 40rpx;
        margin: 16rpx 452rpx 0 0;
      }
      .group_1 {
        position: relative;
        margin: 12rpx 0 0 58rpx;
        .text_3 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 100rpx;
          letter-spacing: 3.125px;
          font-family: DINAlternate-Bold;
          font-weight: 700;
          text-align: center;
          white-space: nowrap;
          line-height: 116rpx;
        }
        .text_4 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 28rpx;
          letter-spacing: 0.875px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
          margin: 60rpx 0 0 2rpx;
        }
        .image_1 {
          width: 2rpx;
          height: 60rpx;
          margin: 24rpx 0 32rpx 98rpx;
        }
        .image-text_1 {
          width: 256rpx;
          margin: 8rpx 0 18rpx 46rpx;
          .section_2 {
            background-color: rgba(36, 116, 254, 1);
            border-radius: 50%;
            width: 16rpx;
            height: 16rpx;
			display: inline-block;margin-right:10rpx;

          }
          .text-group_1 {
            .text-wrapper_1 {
              width: 210rpx;
              height: 38rpx;
              overflow-wrap: break-word;
              font-size: 0;
              letter-spacing: 0.824999988079071px;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 36rpx;
              margin-right: 12rpx;
              .text_5 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 26rpx;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_6 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 34rpx;
                font-family: DINCondensed-Bold;
                font-weight: 700;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_7 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 26rpx;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_8 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 34rpx;
                font-family: DINCondensed-Bold;
                font-weight: 700;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_9 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 26rpx;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
            }
            .text-wrapper_2 {
              width: 222rpx;
              height: 38rpx;
              overflow-wrap: break-word;
              font-size: 0;
              letter-spacing: 0.824999988079071px;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 36rpx;
              margin-top: 14rpx;
              .text_10 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 26rpx;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_11 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 34rpx;
                font-family: DINCondensed-Bold;
                font-weight: 700;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
              .text_12 {
                height: 38rpx;
                overflow-wrap: break-word;
                color: rgba(52, 52, 52, 1);
                font-size: 26rpx;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 36rpx;
              }
            }
          }
        }
      }
      .text_13 {
        overflow-wrap: break-word;
        color: rgba(52, 52, 52, 1);
        font-size: 24rpx;
        letter-spacing: 0.75px;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 34rpx;
        margin: 28rpx 272rpx 0 278rpx;
      }
      .group_2 {
        margin: 24rpx 10rpx 0 24rpx;
        .text_14 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 24rpx;
          letter-spacing: 0.75px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34rpx;
          margin-top: 184rpx;
        }
        .box_2 {
          background-color: rgba(36, 116, 254, 0.35);
          border-radius: 50%;
          margin-left: 30rpx;
          padding: 44rpx 40rpx 38rpx 42rpx;
          .box_3 {
            background-color: rgba(36, 116, 254, 0.35);
            border-radius: 50%;
            padding: 52rpx 54rpx 56rpx 54rpx;
            .box_4 {
              background-color: rgba(36, 116, 254, 0.29);
              border-radius: 50%;
              position: relative;
              width: 208rpx;
              height: 208rpx;
              .image_2 {
                position: absolute;
                left: 100rpx;
                top: -98rpx;
                width: 4rpx;
                height: 400rpx;
              }
              .image_3 {
                position: absolute;
                left: -96rpx;
                top: 104rpx;
                width: 398rpx;
                height: 2rpx;
              }
              .box_5 {
                background-color: rgba(255, 249, 180, 1);
                border-radius: 50%;
                position: absolute;
                left: 130rpx;
                top: 92rpx;
                width: 22rpx;
                height: 22rpx;
              }
              .box_6 {
                background-color: rgba(255, 249, 180, 1);
                border-radius: 50%;
                position: absolute;
                left: 78rpx;
                top: 92rpx;
                width: 22rpx;
                height: 22rpx;
              }
              .box_7 {
                background-color: rgba(255, 249, 180, 1);
                border-radius: 50%;
                position: absolute;
                left: 40rpx;
                top: 92rpx;
                width: 22rpx;
                height: 22rpx;
              }
            }
          }
        }
        .text_15 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 24rpx;
          letter-spacing: 0.75px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34rpx;
          margin: 180rpx 0 0 36rpx;
        }
      }
      .text_16 {
        overflow-wrap: break-word;
        color: rgba(52, 52, 52, 1);
        font-size: 24rpx;
        letter-spacing: 0.75px;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 34rpx;
        margin: 26rpx 268rpx 0 282rpx;
      }
      .group_3 {
        width: 520rpx;
        margin: 44rpx 42rpx 0 40rpx;
        .text-wrapper_3 {
          background-color: rgba(232, 232, 232, 1);
          border-radius: 17px;
          padding: 12rpx 44rpx 14rpx 54rpx;
          .text_17 {
            overflow-wrap: break-word;
            color: rgba(52, 52, 52, 1);
            font-size: 32rpx;
            letter-spacing: 1px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 44rpx;
          }
        }
        .text-wrapper_4 {
          background: url(/static/images/SketchPngded7dd8e33270e5e3d30cbeb58f10f1b94653447baa647c651073628d80e0d4d.png)
            100% no-repeat;
          background-size: 100% 100%;
          padding: 14rpx 48rpx 12rpx 50rpx;
          .text_18 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 32rpx;
            letter-spacing: 1px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 44rpx;
          }
        }
      }
    }
    .section_3 {
      padding: 32rpx 30rpx 34rpx 480rpx;
      .group_4 {
        .image-text_3 {
          width: 240rpx;
          .text-group_3 {
            overflow-wrap: break-word;
            color: rgba(36, 116, 254, 1);
            font-size: 30rpx;
            letter-spacing: 0.9375px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 42rpx;
          }
          .thumbnail_1 {
            width: 38rpx;
            height: 30rpx;
            margin: 6rpx 0 6rpx 0;
          }
        }
      }
    }

    .section_user {
      position: absolute;
      left: 0;
      top: 0;
      width: 750rpx;
      height: 426rpx;
      padding: 24rpx 26rpx 278rpx 24rpx;

      .block_3 {
        height: 596rpx;
       /* background: url(/static/images/SketchPng6cdf6eca27a07a7ac2ea959ae295945f5eec4369e8837c7ec2453c2eb373ab5b.png) -78rpx
          422rpx no-repeat; */
        background-size: 750rpx 398rpx;
        width: 596rpx;
        position: absolute;
        left: 78rpx;
        top: -422rpx;
        padding: 452rpx 6rpx 0 40rpx;
        .image-wrapper_2 {
          width: 84rpx;
          margin-left: 466rpx;
          .thumbnail_2 {
            width: 36rpx;
            height: 24rpx;
            margin-bottom: 2rpx;
          }
          .thumbnail_3 {
            width: 34rpx;
            height: 26rpx;
          }
        }
        .text-wrapper_5 {
          margin: 46rpx 166rpx 0 68rpx;
          .text_20 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 36rpx;
            letter-spacing: -0.21737287938594818px;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 50rpx;
          }
        }
        .image-wrapper_3 {
          margin: 26rpx 44rpx 0 0;
          .image_6 {
            width: 118rpx;
            height: 144rpx;
          }
          .image_7 {
            width: 390rpx;
            height: 46rpx;
            margin: 78rpx 0 20rpx -2rpx;
          }
        }

      }

    }
  }
}

</style>
